<!-- 上下架商品组件 -->
<template>
  <div class="onOffSheel">
    <i class="el-icon-error" @click="closeOnSheel" />
    <div class="sheelContent">
      <div class="leftSheel">
        <!-- 这里的上架或者下架两个字 等待时间传参过来 -->
        <p>请选择要上架的渠道</p>
        <!-- 这里如果是上架的话 已经上架的渠道应该是选中并且禁用的状态 剩余的渠道可以选择 可以一个数组是可选 一个数组是选中并且禁用 -->
        <!-- 如果是下架的话，就只显示可选的按钮 子组件中判断父组件有没有传递第二个参数 没有传递就不显示选中且禁用的按钮 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="canRadio in canUseRadio" :key="canRadio" :label="canRadio" @change="handlerCheckbox">
          </el-checkbox>
          <!-- 这是选中并且禁用的按钮 -->
          <el-checkbox v-for="canotRadio in canotUseRadio" :key="canotRadio" :label="canotRadio" disabled></el-checkbox>
        </el-checkbox-group>
      </div>

      <!-- 前面选中的会添加到选中列表中 选中列表用来渲染当前已选中渠道 前后都可以对数据进行修改 -->
      <div class="rightSheel">
        <p>已选择{{ selectedUseRadio.length }}个渠道</p>
        <ul class="selectedChannels">
          <li v-for="(selectedRadio, index) in selectedUseRadio" :key="selectedRadio">
            <span> {{ selectedRadio }}</span>
            <i class="el-icon-remove" @click="removeTheChannel(index)" />
          </li>
        </ul>
      </div>
    </div>
    <div class="sheelBottom">
      <div class="bottomLeft"  v-if="isSelectShow">
      <span>请选择下架原因：</span>
        <el-select v-model="value" placeholder="请选择" size="mini">
          <!-- options要传参过来 -->
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 这里要判断一下有没有下架的选择框 和下拉框v-ifyong同一个属性值 下拉框没有了，要把offset改成16 -->
      <div class="bottomRight" :span="10" :offset="isSelectShow ? 1 : 16">
        <el-button @click="closeOnSheel" class="bt_white">取消</el-button>
        <el-button type="primary" class="bt_blue">确定</el-button>
      </div>
    </div>
    </div>
</template>
<script>
export default {
  name: "productdetail",
  data() {
    return {
      // 测试底边布局的数据
      isSelectShow: true,
      // 默认选中的多选框
      checkList: ["高德", "口碑", "小红书", "本地渠道"],
      // 可选的多选框
      canUseRadio: ["快手", "京东", "百度"],
      // 不可选的多选框
      canotUseRadio: ["高德", "口碑", "小红书", "本地渠道"],
      // 已经选择的渠道
      selectedUseRadio: ["高德", "口碑", "小红书", "本地渠道"],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  methods: {
    closeOnSheel() {
      this.$emit("closeSheel", false);
    },
    // 删除当前点击的渠道
    removeTheChannel(index) {
      this.selectedUseRadio.splice(index, 1);
      this.checkList.splice(index, 1);
    },
    handlerCheckbox(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped lang="scss">
.onOffSheel {
  width: 40%;
  height: 340px;
  background: #fff;
  border: 1px solid #f6f7f9;
  border-radius: 4px;
  box-shadow: 0 0 1px 1px #fff;
  padding: 20px;

  .el-icon-error {
    position: absolute;
    right: 6px;
    top: 6px;
  }

  .sheelContent {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .leftSheel,
    .rightSheel {
      width: 50%;
      text-align: left;

      p {
        margin-bottom: 10px;
      }
    }

    .rightSheel {
      .selectedChannels {
        width: 100%;

        li {
          font-size: 14px;
          padding: 0 10px;
          color: #606266;
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
        }
      }
    }
  }

  .sheelBottom {
    .bottomLeft {
      width: 65%;
      display: flex;
      align-items: center;
      font-size: 14px;
      ::v-deep.el-input__inner {
        width: 40%;
      }
    }
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-button {
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 20px;
  }

  .el-checkbox-group {
    display: flex;
    flex-direction: column;

    .el-checkbox {
      margin: 4px 0;
    }
  }
}
</style>
